<script setup lang="ts">

</script>
<template>
  <div  ref="blockRef"  class="block"></div>
</template>
<style scoped>
.block {
  position: relative;
  margin:  auto ;
  width: 500px;
  height: 250px;
  background: linear-gradient(0deg, #000, #272727);
}
.block::before,
.block::after {
  opacity: 0.8;
}
.block::before,
.block::after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094,
  #0000ff, #00ff00, #ffff00, #ff0000);
  background-size: 400% 400%;
  width: calc(100% + 5px);
  height: calc(100% + 5px);
  z-index: -1;
  animation: steam 20s linear infinite;
}

.block::after {
  filter: blur(50px);
}
@keyframes steam {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
</style>


